<template>
  <!-- 审批流程 -->
  <div class="stepsBox">
    <div class="steps">
      <div style="height:30px"></div>
      <div class="flex" style="justify-content: left;">
        <div class="step" v-for="item in approvalProcessNow" :key="item.step">
          <div class="step-main stepName">
            {{ item.stepName }}
          </div>
        </div>
      </div>
      <div class="flex" style="justify-content: left;">
        <div class="step" v-for="item in approvalProcessNow" :key="item.step">
          <div v-if="item.step == 0">
            <div class="step-head is-sucess">
              <div class="step-line" style="left:52%"></div>
              <div class="step-dots">
                <div class="step-icon">
                  <div class="step-circle"></div>
                </div>
              </div>
              <div class="step-main userName">
                {{ item.userName }}
              </div>
              <div class="step-main">
                {{ item.createTime }}
              </div>
            </div>
          </div>
          <div
            v-else-if="
              item.step > 0 && item.step < approvalProcessNow.length - 1
            "
          >
            <div v-if="item.status == 1">
              <div class="step-head is-sucess">
                <div class="step-line"></div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>

            <div v-else-if="item.status == 0">
              <div class="step-head is-failed">
                <div class="step-line"></div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
            <div v-else-if="item.status == 3">
              <div class="step-head wait">
                <div class="step-line"></div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else-if="
              item.step == approvalProcessNow.length - 1 || item.step == 9999
            "
          >
            <div v-if="item.status == 1">
              <div class="step-head is-sucess">
                <div class="step-line" style="right:50%"></div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
            <div v-else-if="item.status == 0">
              <div class="step-head is-failed">
                <div class="step-line" style="right:50%"></div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
            <div v-else-if="item.status == 3">
              <div class="step-head wait">
                <div class="step-line" style="right:50%;">
                  <!-- background-color: #fff400; -->
                </div>
                <div class="step-dots">
                  <div class="step-icon">
                    <div class="step-circle"></div>
                  </div>
                </div>
                <div class="step-main userName">
                  {{ item.userName }}
                </div>
                <div class="step-main">
                  {{ item.createTime }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="height:30px"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    approvalProcessNow: Array
  },
  components: {},
  name: "",
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>

<style scoped>
.stepsBox {
  height: 100%;
}

.steps {
  overflow: auto;
  height: 100%;
}
.flex {
  display: flex;
  display: -webkit-flex;
}
.step {
  position: relative;
  vertical-align: top;
  display: inline-block;
  flex: 1;
  min-width: 200px;
  max-width: 220px;
}
.step-head {
  height: 24px;
}
.step-dots {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #fff;
  left: 50%;
  top: 0px;
  z-index: 9999;
  margin-left: -2px;
}

.step-main {
  font-size: 12px;
  color: #999;
  text-align: center;
  padding-left: 20px;
  margin: 6px 0;
}
.stepName {
  font-size: 14px;
  color: #666;
}
.userName {
  margin-top: 32px;
}
.step-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  color: #bfcbd9;
  font-size: 14px;
  border-radius: 50%;
  border: 2px solid #bfcbd9;
  z-index: 10000;
}

.step-line {
  position: absolute;
  top: 9px;
  height: 5px;
  left: 10px;
  right: -10px;
  display: inline-block;
  background-color: #bfcbd9;
  z-index: 99;
}

.step-circle {
  margin: 4px auto 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #bfcbd9;
}

/* 成功 */
.is-sucess .step-dots .step-icon {
  border-color: green;
}
.is-sucess .step-icon .step-circle {
  background-color: green;
}
.is-sucess .step-line {
  background-color: green;
  z-index: 1999;
}
.is-sucess .step-main {
  color: green;
}
/* 拒绝 */
.is-failed .step-dots .step-icon {
  border-color: red;
}
.is-failed .step-icon .step-circle {
  background-color: red;
}
.is-failed .step-line {
  background-color: red;
  z-index: 1999;
}
.is-failed .step-main {
  color: red;
}

.wait .step-line {
  z-index: 199;
}
</style>
